<template>
  <page-wrap stay-still need-login title="个人资料" back hideTab>
    <view class="resume">
      <view class="top-card white">
        <view class="top-card-basic">
          <view class="left">
            <view class="info">
              <text class="name">{{ info.iname }}</text>
              <text class="edit" @click="handleEdit">编辑资料</text>
            </view>
            <view class="tag-list">
              <text class="tag-item">{{ info.personZw || "" }}</text>
              <text class="divider"></text>
              <text class="tag-item">{{ info.gznum || "" }}年经验</text>
              <text class="divider"></text>
              <text class="tag-item">服务{{ info.serviceCount || "" }}人</text>
            </view>
          </view>
          <view class="right">
            <view class="avatar-wrap">
              <image class="avatar" :src="info.pic"></image>
              <image
                class="sex"
                :src="info.sex == '男' ? male : female"
              ></image>
            </view>
          </view>
        </view>
        <view class="concat-bar">
          <view>
            <view class="concat-bar-item">
              <text class="top-icon phone"></text>
              <text>{{ info.servicePhone || "" }}</text>
            </view>
            <view class="concat-bar-item">
              <text class="top-icon email"></text>
              <text>{{ info.serviceMail || "" }}</text>
            </view>
            <view class="concat-bar-item">
              <u-icon name="map" size="40"></u-icon>
              <text class="regionName">{{
                handleRegionName(info.regionid)
              }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="consultant-works">
        <view class="item">
          <view class="item-header">
            <text class="title">擅长类型</text>
            <text class="required">必填</text>
            <text
              v-if="!showGoodAtEdit"
              class="edit-icon"
              @click="handleEditWork"
            ></text>
            <view v-else class="add-icon" @click="handleEditWork">
              <u-icon
                name="checkmark-circle"
                size="48"
                color="#f75a3e"
              ></u-icon>
            </view>
          </view>
          <view class="item-list">
            <u-checkbox-group
              v-if="showGoodAtEdit"
              @change="handleGoodAtChange"
            >
              <u-checkbox
                active-color="#f75a3e"
                v-model="item.checked"
                v-for="(item, index) in goodAtOptions"
                :key="index"
                :name="item.value"
                >{{ item.name }}</u-checkbox
              >
            </u-checkbox-group>
            <text v-else>{{ info.goodAt }} </text>
          </view>
        </view>
        <view class="item">
          <view class="item-header">
            <text class="title">顾问简介</text>
            <text class="required">必填</text>
            <text
              v-if="!showConsultantEdit"
              class="edit-icon"
              @click="handleEditConsultantDesc"
            ></text>
            <view v-else class="add-icon" @click="handleEditConsultantDesc">
              <u-icon
                name="checkmark-circle"
                size="48"
                color="#f75a3e"
              ></u-icon>
            </view>
          </view>
          <view class="item-list">
            <u-form v-if="showConsultantEdit" ref="uForm">
              <u-form-item>
                <u-input
                  -if="showConsultantEdit"
                  type="textarea"
                  placeholder="请输入简介"
                  v-model="info.grzz"
                />
              </u-form-item>
            </u-form>
            <text v-else>{{ info.grzz }}</text>
          </view>
        </view>
        <view class="item">
          <view class="item-header">
            <text class="title">擅长话题</text>
            <text class="required">必填</text>
            <text
              v-if="!showTopicEdit"
              class="edit-icon"
              @click="handleShowEditTopic"
            ></text>
            <view v-else class="add-icon" @click="handleShowEditTopic">
              <u-icon
                name="checkmark-circle"
                size="48"
                color="#f75a3e"
              ></u-icon>
            </view>
          </view>
          <view class="item-list">
            <view v-if="showTopicEdit">
              <view
                v-for="(item, index) in info.topicList"
                :key="index"
                class="item-list-line"
              >
                <u-form ref="uForm" style="width: 85%">
                  <u-form-item
                    ><u-input
                      type="textarea"
                      placeholder="请输入话题"
                      v-model="info.topicList[index].topic"
                      @blur="handleEditTopic(info.topicList[index])"
                  /></u-form-item>
                </u-form>
                <u-icon
                  name="minus-circle"
                  size="48"
                  color="#f75a3e"
                  @click="handleClickMinus(info.topicList[index], index)"
                ></u-icon>
              </view>
            </view>
            <view v-else>
              <view
                class="item-list-topic"
                v-for="(item, index) in info.topicList"
                :key="index"
                >{{ item.topic }}</view
              >
            </view>
            <view class="item-list-operate" @click="handleClickAdd">
              <u-icon name="plus-circle" size="48" color="#f75a3e"></u-icon>
              <text class="add-text">添加</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </page-wrap>
</template>

<script>
// import region from "@/utils/region.min";
import { getFileByUrl } from "@/api/index";
import { insertDefault } from "@/utils/handle";

import {
  editAdviserTopic,
  delAdviserTopic,
  ztConsultantInfo,
  editConsultant,
} from "@/api/modules/career";
import ShareMixin from "@/mixins/share";
export default {
  name: "resume",
  mixins: [ShareMixin],
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      male: this.$imgBase + "career/careerAssessResult/male.png",
      female: this.$imgBase + "career/careerAssessResult/female.png",
      info: {
        grzz: "",
        topicList: [],
      },
      showTop: false,
      complete: 0,
      addIcon: this.$imgBase + "resume/add.png?v=1",
      editIcon: this.$imgBase + "resume/edit.png?v=1",
      personId: "",
      goodAtOptions: [
        { value: "职业规划", checked: false, name: "职业规划" },
        { value: "简历精修", checked: false, name: "简历精修" },
        { value: "投递指导", checked: false, name: "投递指导" },
        { value: "面试辅导", checked: false, name: "面试辅导" },
        { value: "薪酬谈判", checked: false, name: "薪酬谈判" },
        { value: "风险规避", checked: false, name: "风险规避" },
        { value: "Offer筛选", checked: false, name: "Offer筛选" },
      ],
      good: [],
      showGoodAtEdit: false,
      showConsultantEdit: false,
      showTopicEdit: false,
      region: [],
    };
  },
  onShow() {
    if (!this.personId) return;
    this.ztConsultantInfoFn();
  },
  onLoad(opt) {},  
  created() {
    getFileByUrl('https://img3.job1001.com/ypMp/elan/files/region.min.json').then(res => {
      this.region = insertDefault(res)
    })
  },
  mounted() {},
  methods: {
    handleClickAdd() {
      this.info.topicList.push({
        topicId: "",
        topic: "",
        personId: this.personId,
      });
      if (!this.showTopicEdit) {
        this.showTopicEdit = true;
      }
    },
    handleClickMinus(item, index) {
      this.info.topicList.splice(index, 1);
      if (!item.topicId) return;
      const params = {
        topicId: item.topicId,
      };
      delAdviserTopic(params).then((res) => {
        if (res.code == 200) {
          uni.showToast({ icon: "", title: "已删除" });
        }
      });
    },
    handleEditTopic(item) {
      const params = {
        personId: parseInt(this.personId),
        topicId: item.topicId || "",
        topic: item.topic,
      };
      this.editAdviserTopicFn(params);
    },
    editAdviserTopicFn(params) {
      editAdviserTopic(params).then((res) => {
        if (res.code == 200) {
          const temp = this.info.topicList.find((item) => !item.topicId);
          temp.topicId = res.data.topicId;
          uni.showToast({ icon: "", title: "修改成功" });
        }
      });
    },
    handleShowEditTopic() {
      if (this.showTopicEdit) {
        this.info.topicList.forEach((item, index) => {
          if (!item) {
            this.info.topicList.splice(index, 1);
          }
        });
        this.showTopicEdit = false;
      } else {
        this.showTopicEdit = true;
        if (!this.info.topicList.length) {
          this.info.topicList.push({
            topicId: "",
            topic: "",
            personId: this.personId,
          });
        }
      }
    },
    handleEditConsultantDesc() {
      this.showConsultantEdit = !this.showConsultantEdit;
      if (!this.showConsultantEdit) {
        const params = {
          personId: this.personId,
          grzz: this.info.grzz,
        };
        this.editConsultantFn(params);
      }
    },
    handleEditWork() {
      this.showGoodAtEdit = !this.showGoodAtEdit;
      if (!this.showGoodAtEdit) {
        const params = {
          personId: this.personId,
          goodAt: this.info.goodAt,
        };
        this.editConsultantFn(params);
      }
    },
    editConsultantFn(params) {
      editConsultant(params).then((res) => {
        if (res.code == 200) {
          uni.showToast({ icon: "", title: "修改成功" });
        }
      });
    },
    handleGoodAtChange(val) {
      this.info.goodAt = val.join("，");
    },
    ztConsultantInfoFn() {
      const params = {
        personId: this.personId,
      };
      ztConsultantInfo(params).then((res) => {
        if (res.code == 200) {
          this.info = res.data;
          this.getGoodAtOptions();
        }
      });
    },
    getGoodAtOptions() {
      const temp = this.info.goodAt.split("，");
      this.goodAtOptions.forEach((item) => {
        temp.forEach((_item) => {
          if (item.name === _item) {
            item.checked = true;
          }
        });
      });
    },
    handleEdit() {
      uni.navigateTo({
        url: `/pagesSub/career/consultant/editConsultantInfo/index?personId=${this.personId}`,
      });
    },
    handleRegionName(id) {
      if (+id) {
        let regionId = "" + id;
        let regionPId = regionId.slice(0, 2) + "0000";
        let regionCId = regionId.slice(0, 4) + "00";
        let regionP = this.region.find((ele) => ele.value === regionPId);
        let regionC = regionP.children.find((ele) => ele.value === regionCId);
        return regionP.label + " - " + regionC.label;
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="scss">
$img-base-resume: $img-base + "resume/";
@include img-base-self(".king-kong .k-icon-aim", "resume/aim.png?v=1");
@include img-base-self(".king-kong .k-icon-refresh", "resume/refresh.png?v=1");
@include img-base-self(".king-kong .k-icon-preview", "resume/preview.png?v=1");
@include img-base-self(".king-kong .k-icon-annex", "resume/annex.png");
.resume {
  background-color: $uni-bg-color-grey;
  color: $uni-text-color-333;
  position: relative;
  padding-bottom: calc(42rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(42rpx + env(safe-area-inset-bottom));
  .white {
    background-color: $uni-bg-color;
    padding: 32rpx;
  }
  .top-icon {
    display: inline-block;
    margin-right: 16rpx;
    width: 44rpx;
    height: 44rpx;
    background-size: 100% 100%;
    vertical-align: middle;
    &.phone {
      background-image: url($img-base-resume + "phone.png");
    }
    &.email {
      background-image: url($img-base-resume + "mail.png");
    }
  }
  .top-card {
    margin: 32rpx 32rpx 0 32rpx;
    border-radius: 10rpx;
    &-basic {
      display: flex;
      justify-content: space-between;
      .info {
        display: flex;
        align-items: center;
        .name {
          margin-right: 16rpx;
          font-size: $uni-font-size-max;
          font-weight: bold;
          color: $uni-text-color-222;
          letter-spacing: 2rpx;
        }
        .edit {
          font-size: 24rpx;
          color: #ff4928;
          background-color: #f5f5f5;
          padding: 8rpx 28rpx;
          display: inline-block;
          border-radius: 20rpx;
        }
      }
      .avatar-wrap {
        display: inline-block;
        padding: 6rpx;
        border-radius: 50%;
        background: linear-gradient(
          135deg,
          rgba(255, 212, 128, 1),
          rgba(255, 95, 55, 1)
        );
        position: relative;
      }
      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }
      .sex {
        position: absolute;
        width: 28rpx;
        height: 28rpx;
        border-radius: 50%;
        position: absolute;
        right: 0;
        top: 15rpx;
      }
      .tag-list {
        margin: 18rpx 0 18rpx 0;
        color: $uni-text-color-333;
        font-size: $uni-font-size-base;
      }
      .status {
        font-size: $uni-font-size-base;
        color: $uni-text-color-999;
      }
      .divider {
        display: inline-block;
        width: 1px;
        height: 24rpx;
        vertical-align: middle;
        background-color: $uni-text-color-grey;
        margin: 0 16rpx;
      }
    }
    .concat-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 24rpx 0;
      &-item {
        margin-top: 14rpx;
        font-size: $uni-font-size-base;
        display: flex;
        align-items: center;
        .regionName {
          margin-left: 22rpx;
        }
      }
      .complete {
        padding: 18rpx 32rpx;
        margin-right: -32rpx;
        background-color: $uni-bg-color-disable;
        border-radius: 32rpx 0 0 32rpx;
        font-size: $uni-font-size-nor;
        line-height: $uni-font-size-base;
        color: $uni-text-color-error;
      }
    }
    .address {
      margin-top: 12rpx;
    }
  }
  .consultant-works {
    padding: 24rpx;
    margin-top: 24rpx;
    background-color: #fff;
    .item {
      margin-bottom: 32rpx;
      &-header {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;
        .title {
          font-size: 36rpx;
          font-weight: 600;
        }
        .required {
          margin-left: 16rpx;
          padding: 0rpx 2rpx;
          color: #ff4928;
          border: 1px solid #f04646;
          border-radius: 8rpx;
          font-size: 24rpx;
          line-height: 26rpx;
        }
        .add-icon {
          margin-left: auto;
        }
        .edit-icon {
          margin-left: auto;
          width: 50rpx;
          height: 50rpx;
          background-image: url($img-base-resume + "edit.png?v=1");
          background-size: 100% 100%;
        }
      }
      &-list {
        &-line {
          display: flex;
          justify-content: space-between;
        }
        &-topic {
          padding: 16rpx 0;
        }
        &-operate {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 12rpx;
          .add-text {
            color: #f75a3e;
            margin-left: 16rpx;
          }
        }
      }
    }
  }
}
</style>
